Widget is the main functional component of Service Portal.

Widget:

        Reusable component

        Used to display the data

        Way to interact with system data for user.  

We should know AngularJS to work on widgets.               

In Portal pages, we create widget instance for functioning widget.

 

We have following components in widget.

              1.Body HTML template

              2.Server script

              3.CSS

              4.Client controller

              5.controllerAs

Lets try with the below simple code

Client Script:

function() {
/* widget controller */
var c = this;

c.aa= function() {
c.server.update();

}
};

....................................................

 

Serverside Script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
if(!input){
var p = gs.getUser().getName();
data.name = p;
var ss = [];
var gt = new GlideRecord('incident');
gt.addQuery('active','true');
gt.addQuery('assigned_to','!=','');
gt.query();
var noi=0;
noi = gt.getRowCount();
data.count = noi;
while(gt.next()){
ss.push(""+gt.number);
}

data.zz=ss;
}

if(input){
console.log("Pankaj "+input.firstname);
data.secondname=input.firstname;
}



})();
.................................................

 

HTML:

<div>
<!-- your widget template -->
<h1>Hi {{data.name}}</h1>

<h3>Enter Text</h3>
<input type="text" ng-model="c.data.firstname">
<button ng-click="c.aa(c.data.firstname)">Submit</button>
<h4>
{{c.data.firstname}}
{{c.data.secondname}}
</h4>

<div ng-bind="c.data.secondname">
</div>

<div ng-if=c.data.count>
<h1 ng-repeat="x in c.data.zz">
{{x}}
</h1>
</div>

</div>